<template>
    <div class=''>
        {{ refVal }} --- toRef {{ name }} --- 结构出来的数据{{ age }} --- {{ age, and }}
    </div>
    <div @click="btn">
        点我修改i
    </div>
</template>

<script lang='ts' setup>

import { toRef, reactive, toRefs, toRaw, ref, computed } from 'vue';
interface M {
    name: string | Number
    [key: string]: any
}
let refVal = reactive<M>({ name: 'shoahu1', age: 16, and: '4444' })
// 结构对象toRef变成响应式
let name = toRef(refVal, 'name')
// toRef结构对象多个变成响应式
let { age, and } = toRefs(refVal)
const btn = () => {
    console.log('===>',);
    refVal.name = 55555
    // toRaw  结构成非响应式
    console.log('===>', refVal, toRaw(refVal));
    console.log('===>age, and ', age, and);
}
const computedVal = computed<string | number>({
    get() {
        return refVal.name  +''
    }, set() { }
})
</script>

<style scoped lang='less'></style>